<template>
  <van-datetime-picker
    v-bind="$attrs"
    v-on="$listeners"
    v-model="showValue"
    :type="type"
    :title="title"
    @confirm="onConfirm"
  />
</template>

<script>
import moment from 'moment'

export default {
  name: 'VantDataTime',
  model: {
    prop: 'value',
    event: 'update:value'
  },
  props:{
    title: {
      type: String,
      default: '选择年月日'
    },
    value: {
      type: String,
      default: ''
    },
    format: {
      type: String,
      default: 'YYYY-MM-DD'
    },
    disabled: {
      type: Boolean,
      default: false
    },
    type: {
      type: String,
      default: 'date'
    }
  },
  watch: {
    value: {
      immediate: true,
      handler() {
        this.value2ShowValue()
      }
    }
  },
  data(){
    return{
      showValue: new Date()
    }
  },
  methods:{
    value2ShowValue() {
      if (this.value) {
        this.showValue = moment(this.value, this.format).toDate()
      }
    },
    onConfirm(value) {
      this.$emit('update:value', moment(value).format(this.format))
      this.$emit('confirm', moment(value).format(this.format))
    },
  }
}
</script>

<style scoped lang="scss">

</style>
